<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '事件管理',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>
<template>
  <view class="pa-4">
    <view class="river-drop flex">
      <view class="river-label">选择河道</view>
      <view class="flex-1">
        <wd-picker
          v-model="river"
          :columns="riverOptions"
          placeholder="请选择河道"
          value-key="id"
          label-key="title"
        />
      </view>
      <view class="flex items-center ml-2">
        <wd-img width="24rpx" height="24rpx" src="/static/icon/icon4.svg" />
        <text class="text-xs color-blue ml-1">添加事件</text>
      </view>
    </view>
    <wd-tabs custom-class="custom-tabs mt-2" v-model="tab">
      <block v-for="item in tabOptions" :key="item">
        <wd-tab :title="item.label"></wd-tab>
      </block>
    </wd-tabs>
    <view class="card my-2 pa-4" v-for="item in 6" :key="item.id">
      <view class="flex items-center">
        <view class="block"></view>
        <view class="text-sm color-black font-semibold flex-1 ml-2 line-clamp-1">
          驴桥头浜栏杆断裂事件
        </view>
      </view>
      <view class="text-xs line-clamp-2 pl-3 pr-2 mt-2">
        受台风影响，近沈桂桥北面小区内X米处栏杆被倒伏树木砸断，造成一定隐患，需及成一定隐时...
      </view>
      <view class="status">进行中</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const river = ref<number>(0)
const riverOptions = ref([])
const tab = ref<number>(0)
const tabOptions = ref([
  { label: '进行中', value: 10 },
  { label: '待处理', value: 20 },
  { label: '已处理', value: 30 },
])
const getRiverData = async () => {
  river.value = 1
  riverOptions.value = [
    { title: '全部河道', id: 0 },
    { title: '河道1', id: 1 },
    { title: '河道2', id: 2 },
  ]
}
const handleRiverChange = ({ value }) => {
  console.log(value)
}
onMounted(() => {
  getRiverData()
})
</script>

<style lang="scss">
page {
  background: #f4f8fb;
  /* #ifdef H5 */
  min-height: 100%;
  /* #endif */
}
$white-color: #fff;
$primary-color: #2953ff;
$primary-light-color: #52bfff;
$light-color: #f7f8fa;
.color-blue {
  color: $primary-color;
}
.card {
  background: #fff;
  border-radius: 24rpx;
  position: relative;
  .block {
    background: $primary-color;
    width: 12rpx;
    height: 12rpx;
  }
  .status {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba($color: #ff9900, $alpha: 0.1);
    font-size: 24rpx;
    color: #ff9900;
    line-height: 42rpx;
    min-width: 92rpx;
    text-align: center;
    padding: 0 6rpx;
    box-sizing: border-box;
    border-radius: 0 0 0 20rpx;
  }
}
:deep(.river-drop) {
  height: 64rpx;
  border-radius: 12rpx;
  overflow: hidden;
  .river-label {
    color: $white-color;
    background: $primary-color;
    font-size: 26rpx;
    line-height: 64rpx;
    width: 140rpx;
    text-align: center;
  }
  .wd-picker {
    height: 64rpx;
    .wd-cell {
      border-radius: 0 12rpx 12rpx 0;
    }
    .wd-cell__wrapper {
      padding: 0 20rpx 0 0;
      height: 64rpx;
      align-items: center;
    }
  }
}
:deep(.custom-tabs) {
  .wd-tabs__nav--wrap {
    background: #f4f8fb !important;
    .wd-tabs__nav-item {
      flex: none !important;
      padding: 0 32rpx !important;
    }
  }
} 
</style>
